<!DOCTYPE html>
<html>
<head>
    <title>django-websocket</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">//<![CDATA[
    $(function () {
        $('#connect_websocket').click(function () {
            if (window.s) {
                window.s.close()
            }
            /*创建socket连接*/
            var socket = new WebSocket("ws://" + window.location.host + "/pkg/sub/");
            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
                window.s.send($('#message').val());//通过websocket发送数据
            };
            socket.onmessage = function (e) {
                console.log('[SDK]: ' + e.data);//打印出服务端返回过来的数据
                $('#messagecontainer').append('<p>' + e.data + '</p>');
            };
            // Call onopen directly if socket is already open
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
            window.s = socket;
        });
        $('#send_message').click(function () {
            //如果未连接到websocket
            if (!window.s) {
                alert("websocket未连接.");
            } else {
                window.s.send($('#message').val());//通过websocket发送数据
            }
        });
        $('#close_websocket').click(function () {
            if (window.s) {
                window.s.close();//关闭websocket
                console.log('websocket已关闭');
            }
        });

    });
    //]]></script>
</head>
<body>
<br>
<input type="text" id="message" value="1461722512884260"/>
<button type="button" id="connect_websocket">连接 websocket</button>
<button type="button" id="send_message" style="display: none">发送 message</button>
<button type="button" id="close_websocket" style="display: none">关闭 websocket</button>
<h1>SDK 客户端实时日志</h1>

<div id="messagecontainer" style="word-break: break-all">
</div>
</body>
</html>